<template>
    <div
        style="padding-top: 40px"
        v-loading="loading"
        element-loading-text="正在搜索中，请稍等"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <el-button type="primary" @click="addNode()">新增审批节点</el-button>

        <!-- <el-button type="primary" @click="dFile()">下载文件</el-button> -->

        <!-- <el-steps simple :active="stepIndex" style="margin: 30px 10px 30px 10px">
            <el-step v-for="(item, index) in stepList" :key="index" :title="item.stepName"
                >{{ item.stepName }}
            </el-step>
        </el-steps> -->

        <div style="margin: 30px 10px 30px 10px" 
        v-for="(item, index) in stepList" :key="index" :title="item.stepName"
                >{{ item.stepName }}

                <el-button @click="editorNode(item)">编辑当前节点</el-button>
                <el-button @click="delNode(item)">删除一个节点</el-button>
        </div>

       

        <addOrUpdateNode ref="addOrUpdateNodeDom" @refreshDataList="getStepsByFlow(itemData)" v-show="visible" />

        <el-button @click="$router.go(-1)">返回</el-button>
    </div>
</template>

<script>
import addOrUpdateNode from './add-or-update-node';
import API from '@/api';

export default {
    components: {
        addOrUpdateNode
    },
    data() {
        return {
            stepList: [],
            stepIndex: 1,
            itemData
        };
    },
    mounted() {
        var itemData = this.$route.query.itemData;
        this.itemData = itemData;

        this.getStepsByFlow(itemData); //获取流程步骤节点
    },

    methods: {
        //添加节点
        addNode() {
            this.$refs.addOrUpdateNodeDom.init(this.itemData,null, 1);
        },

        dFile() {
            var _that = this;
            var parm = {
                TOKEN: sessionStorage.getItem('token'),
                id: 'ccdb4d5efdf44bb9bfd6afaebe700613'
            };

            API.approvalProcessManage.downFile(parm).then((res) => {
                // console.log('下载文件数据：', res);
                // this.fileDownLoad(res);
                // var urlStr = 'http://192.168.1.100:7083' + res.result.filePath;
                // var urlStr = 'http://192.168.1.100:7081/byjz-ia/sys/file/showpic?id=53a6aec601aa4835b592552d91b2ee8c';
                // const ele = document.createElement('a');
                // ele.setAttribute('href', urlStr); //设置下载文件的url地址
                // ele.setAttribute('download', ''); //用于设置下载文件的文件名
                // ele.click();
                // var link = document.createElement('a');
                // link.setAttribute("download", '');
                // link.href = window.URL.createObjectURL(new Blob([res]));
                // document.body.appendChild(link);//添加到页面中，为兼容Firefox浏览器
                // link.click();
                // document.body.removeChild(link);//从页面移除
            });
        },

        fileDownLoad(data) {
            var linkElement = document.createElement('a'); //创建点击下载的元素
            //判断浏览器是否支持blob对象
            try {
                //该实例化的方式第一个参数必须是数组的格式
                var blob = new Blob([data], { type: 'application/zip' });
            } catch (e) {
                //旧版本浏览器下的blob创建对象
                window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
                if (e.name == 'TypeError' && window.BlobBuilder) {
                    var blobbuilder = new BlobBuilder();
                    BlobBuilder.append(data);
                    var blob = blobbuilder.getBlob('application/zip');
                } else {
                    alert('浏览器版本较低，暂不支持该文件类型下载');
                }
            }
            var url = window.URL.createObjectURL(blob);
            linkElement.setAttribute('href', url);
            linkElement.setAttribute('downLoad', 'download');
            linkElement.click();
        },
         
        //删除步骤节点 
        delNode(item) {
            console.log("数据",item);
            var parm = {
                stepId: item.stepId
            };
            API.approvalProcessManage.deleteStep(parm).then((res) => {
                if (res.code == '0000') {
                    this.$message({
                        type: 'success',
                        message: `删除成功`
                    });
                    this.getStepsByFlow(this.itemData);
                }
            });
        },
        //编辑步骤节点
        editorNode(item){

           this.$refs.addOrUpdateNodeDom.init(this.itemData, JSON.parse(JSON.stringify(item)), 2);
        },

        //获取流程步骤节点
        getStepsByFlow(itemData) {
            var _that = this;
            var parm = {
                flowId: itemData.flowId
            };
            API.approvalProcessManage.qryAllStepsByFlow(parm).then((res) => {
                _that.stepList = res.result;
                _that.stepIndex = 1;
                _that.$forceUpdate();
            });
        }
    }
};
</script>

<style>
</style>